<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>08.layui时间线</title>
        <link rel="stylesheet" href="static/layui-2.5.6/css/layui.css">
    </head>
    <body>
        <div class="layui-container">
            <div class="layui-row layui-col-lg-offset2 layui-col-lg8">
                <!-- layui-timeline: 时间线组件 -->
                <ul class="layui-timeline">
                    <!-- layui-timeline-item: 时间线的item -->
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <!-- layui-timeline-content: 时间线内容 -->
                        <div class="layui-timeline-content layui-text">
                            <!-- layui-timeline-title: 内容的标题 -->
                            <h3 class="layui-timeline-title">菩萨蛮·平林漠漠烟如织</h3>
                            <p>
                                平林漠漠烟如织，寒山一带伤心碧。<br/>
                                暝色入高楼，有人楼上愁。<br/>
                                玉阶空伫立，宿鸟归飞急。<br/>
                                何处是归程？长亭连短亭。<br/>
                            </p>
                        </div>
                    </li>
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis layui-icon-diamond"></i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">8月16日</h3>
                            <p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
                            <ul>
                                <li>《登高》</li>
                                <li>《茅屋为秋风所破歌》</li>
                            </ul>
                        </div>
                    </li>
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis layui-icon-star"></i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">8月15日</h3>
                            <p> &emsp;峨眉山月歌<br/>
                                峨眉山月半轮秋，<br/>
                                影入平羌江水流。<br/>
                                夜发清溪向三峡，<br/>
                                思君不见下渝州。<br/>
                            </p>
                        </div>
                    </li>
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <div class="layui-timeline-title">过去</div>
                        </div>
                    </li>
                </ul>

            </div>
        </div>


        <script src="static/layui-2.5.6/layui.js"></script>
        <script>
            // element是导航, 选项卡需要的组件
            layui.use(['layer', 'form', 'element'], function () {
                var layer = layui.layer,
                    form = layui.form,
                    element = layui.element;
            });
        </script>
    </body>
</html>
